<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>员工管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/self/self-common.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

    <!-- Sweet Alert -->
    <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">

        <div class="col-sm-12 search-card">
            <div class="ibox">
                <div class="ibox-content">

                    <form class="form-inline">

                        <div class="form-group searchCX">
                            <input id="searchStaffSn" class="form-control" type="text" placeholder="请输入员工工号" clearable>
                        </div>

                        <div class="form-group searchCX">
                            <input id="searchStaffName" class="form-control" type="text" placeholder="请输入员工姓名" clearable>
                        </div>

                        <div class="form-group">
                            <button id="btnSearch" class="btn btn-purple" type="button" onclick="querySearch()">
                                <i class="fa fa-search"></i>
                                查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-12 table-card">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <i class="fa fa-bookmark"></i>
                        员工管理
                    </h5>
                </div>
                <div class="ibox-content">
                    <div id="toolbar">
                        <form class="form-inline">
                            <div class="form-group">
                                <button class="btn btn-purple" type="button" data-toggle="modal"
                                        data-target="#myModalAdd">
                                    <i class="fa fa-plus-circle"></i>
                                    新增
                                </button>
                            </div>
                            <div class="form-group">
                                <button id="importBtn" class="btn btn-purple" type="button" data-toggle="modal"
                                        data-target="#myModal">
                                    <i class="fa fa-upload"></i>
                                    导入
                                </button>
                            </div>
                            <div class="form-group">
                                <button id="export" class="btn btn-orange" type="button">
                                    <i class="fa fa-download"></i>
                                    导出
                                </button>
                            </div>
                        </form>
                    </div>
                    <table id="dataTable" data-mobile-responsive="true"></table>
                </div>
            </div>
        </div>
    </div>

    <!--    新增-->
    <div class="modal inmodal fade" id="myModalAdd">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增人员</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group ui-sortable-helper">
                            <label class="col-sm-3 control-label">*员工工号：</label>
                            <div class="col-sm-7">
                                <input id="staffSnAdd" type="text" name="" class="form-control"
                                       placeholder="请输入员工工号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">*员工名称：</label>
                            <div class="col-sm-7">
                                <input id="staffNameAdd" type="text" name="" class="form-control"
                                       placeholder="请输入员工名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">*性别：</label>
                            <div class="col-sm-7">
                                <select id="sexAdd" class="selectpicker show-tick" data-live-search="true"
                                        title="选择性别">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系方式：</label>
                            <div class="col-sm-7">
                                <input id="telephoneAdd" type="text" name="" class="form-control"
                                       placeholder="请输入联系方式">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">职务：</label>
                            <div class="col-sm-7">
                                <input id="jobAdd" type="text" name="" class="form-control"
                                       placeholder="请输入职务">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">技能：</label>
                            <div class="col-sm-7">
                                <input id="skillAdd" type="text" name="" class="form-control"
                                       placeholder="请输入技能">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">部门：</label>
                            <div class="col-sm-7">
                                <input id="departmentAdd" type="text" name="" class="form-control"
                                       placeholder="请输入部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-7">
                                <textarea class="form-control diff-textarea" id="remarksAdd" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white btn-close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success btn-save" id="btnAddSave">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--变更-->
    <div class="modal inmodal fade" id="myModalUpdate">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">编辑人员</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">

                    <div class="col-md-12">
                        <div class="form-group ui-sortable-helper">
                            <label class="col-sm-3 control-label">*员工工号：</label>
                            <div class="col-sm-7">
                                <input id="staffSnUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入员工工号">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">*员工名称：</label>
                            <div class="col-sm-7">
                                <input id="staffNameUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入员工名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">*性别：</label>
                            <div class="col-sm-7">
                                <select id="sexUpdate" class="selectpicker show-tick" data-live-search="true"
                                        title="选择性别">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系方式：</label>
                            <div class="col-sm-7">
                                <input id="telephoneUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入联系方式">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">职务：</label>
                            <div class="col-sm-7">
                                <input id="jobUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入职务">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">技能：</label>
                            <div class="col-sm-7">
                                <input id="skillUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入技能">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">技能：</label>
                            <div class="col-sm-7">
                                <input id="departmentUpdate" type="text" name="" class="form-control"
                                       placeholder="请输入部门">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-7">
                                <textarea class="form-control diff-textarea" id="remarksUpdate" rows="6"></textarea>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white btn-close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success btn-save" id="btnUpdateSave">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--导入模态框-->
    <div class="modal inmodal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">工单导入</h4>
                    <button type="button" class="close" data-dismiss="modal" onclick="removeImp()">×</button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="import_btn" style="width:100%;text-align:left">
                                <label for="import"><span>选择文件</span></label>
                                <span id="fileName">未上传文件</span>
                            </div>
                            <input type="file" id="import" onchange="loadFile(this.files[0])" name="import"
                                   style="width: 220px;opacity:0">
                        </div>
                        <div class="form-group">
                            <a class="downtele" style="text-align:left;" href="#" onclick="downLoadTemp();"><span
                                    style="padding:5px ;font-size:16px;font-weight:200;color:#337ab7">模板下载</span></a>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white btn-close" data-dismiss="modal"
                            onclick="removeImp()">取消
                    </button>
                    <button type="button" class="btn btn-purple btn-save" id="btnSaveExl" onclick="mySubmit()">保存
                    </button>
                </div>
            </div>
        </div>
    </div>


</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>

<script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>
    var searchStaffName = '';
    var searchStaffSn = '';
    var selectUserId = 0;

    function querySearch() {
        var name = $.trim($("#searchStaffName").val());
        if (name) {
            searchStaffName = name;
        }
        var number = $.trim($("#searchStaffSn").val());
        if (number) {
            searchStaffSn = number;
        }
        $('#dataTable').bootstrapTable('refresh');
        searchStaffName = '';
        searchStaffSn = '';
    }

    $(document).ready(function () {
        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                searchText: '',
                name: searchStaffName,
                number: searchStaffSn
            }
        }

        $('#dataTable')
            .bootstrapTable({
                url: baseUrl + "getAllUser",
                method: "post",
                queryParamsType: "",
                queryParams: queryParams,
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                search: false, //是否显示搜索框功能
                pagination: true, //是否分页
                showRefresh: true, //是否显示刷新功能
                showToggle: true,
                showColumns: true,
                // clickToSelect: true, //是否启用点击选中行
                // uniqueId: "indentId", //每一行的唯一标识，一般为主键列
                // idField: "indentId",
                formatSearch: function () {
                    return "人员姓名";
                },
                iconSize: 'outline',
                sidePagination: "server", //服务端请求
                showExport: true,//显示导出按钮
                buttonsAlign: "right",  //按钮位置
                exportTypes: ['excel'],  //导出文件类型
                pageList: [10, 20, 30, 'all'],
                exportDataType: "basic",//导出类型 'basic':当前页, 'all', 'selected'.
                toolbar: '#toolbar', //工具按钮用哪个容器
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list',
                    export: 'glyphicon-export'
                }
                , responseHandler: function (res) {

                    selectUserId = '';
                    var rows = [];
                    if (res.total !== 0) {
                        rows = res.list;
                    }
                    var result = {
                        rows: rows,
                        total: res.total
                    };
                    return result;
                },
                onEditableSave: function (field, row, oldValue, $ele) {
                    //更新数据到数据库
                },
                columns: [{
                    field: 'staffSn',
                    title: '员工工号'
                }, {
                    field: 'staffName',
                    title: '员工名称'
                }, {
                    field: 'sex',
                    title: '性别',
                    formatter: function (value, row, index) {
                        if (row.sex == '1') {
                            return '男'
                        } else if (row.sex == '2') {
                            return '女';
                        } else {
                            return '';
                        }
                    }
                }, {
                    field: 'telephone',
                    title: '联系方式',
                }, {
                    field: 'job',
                    title: '职务',
                }, {
                    field: 'skill',
                    title: '技能',
                }, {
                    field: 'department',
                    title: '部门',
                }, {
                    field: 'remarks',
                    title: '备注',
                }
                    , {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            console.log(row)
                            var resUpdate = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_edit'  onclick='updatePage(\"" + row.id + "\")' title='编辑'></button>";
                            var resDel = "<button type='button' class = 'btn btngroup btn-xs czIcon icon_delete'  onclick='deleteData(\"" + row.id + "\")'title='删除'></button>";
                            return resUpdate + resDel;
                        }
                    }
                ],
                onClickRow: function (row, $element) {
                    $('.info').removeClass('info');
                    $($element).addClass('info');
                    selectUserId = row.id;

                }
            });

        //新增窗口清空
        $("#myModalAdd").on("hidden.bs.modal", function () {
            $("#staffSnAdd").val('')
            $("#staffNameAdd").val('')
            $("#sexAdd").val('')
            $("#sexAdd").selectpicker('refresh')
            $("#telephoneAdd").val('');
            $("#jobAdd").val('');
            $("#skillAdd").val('');
            $("#departmentAdd").val('');
            $("#remarksAdd").val('');
        })
    });

    $("#btnAddSave").click(function () {
        var staffSn = $.trim($("#staffSnAdd").val());
        var staffName = $.trim($("#staffNameAdd").val());
        var sex = $("#sexAdd").val();
        if (!staffSn) {
            layer.msg("请输入员工工号");
            return;
        }
        if (!staffName) {
            layer.msg("请输入员工名称");
            return;
        }
        if (!sex) {
            layer.msg("请选择员工性别");
            return;
        }
        var telephone = $("#telephoneAdd").val();
        var job = $("#jobAdd").val();
        var skill = $("#skillAdd").val();
        var department = $("#departmentAdd").val();
        var remarks = $("#remarksAdd").val();
        PostWebApi("addUser", {
            staffSn: staffSn,
            staffName: staffName,
            sex: sex,
            telephone: telephone,
            job: job,
            skill: skill,
            department: department,
            remarks: remarks
        }).done(function (data) {
            if (data.code == 0) {
                layer.msg("添加成功");
                $("#myModalAdd").modal('hide');
                $('#dataTable').bootstrapTable('refresh');
                selectUserId = 0;
            } else {
                layer.msg(data.msg);
            }
        })
    })

    function updatePage(update_id) {
        PostWebApi("getUserById", {
            id: update_id
        }).done(function (data) {
            if (data.code == 0) {
                var info = data.data;
                $("#staffSnUpdate").val(info.staffSn);
                $("#staffNameUpdate").val(info.staffName);
                $("#sexUpdate").val(info.sex);
                $("#sexUpdate").selectpicker('refresh');
                $("#telephoneUpdate").val(info.telephone);
                $("#jobUpdate").val(info.job);
                $("#skillUpdate").val(info.skill);
                $("#departmentUpdate").val(info.department);
                $("#remarksUpdate").val(info.remarks);

                $("#myModalUpdate").modal('show');
            }
        })
    }

    $("#btnUpdateSave").click(function () {
        var staffSn = $("#staffSnUpdate").val();
        var staffName = $("#staffNameUpdate").val();
        var sex = $("#sexUpdate").val();
        var telephone = $("#telephoneUpdate").val();
        var job = $("#jobUpdate").val();
        var skill = $("#skillUpdate").val();
        var department = $("#departmentUpdate").val();
        var remarks = $("#remarksUpdate").val();
        // var fnumber = $.trim($("#fnumberUpdate").val());
        // var fname = $.trim($("#fnameUpdate").val());
        // var fgender = $("#fgenderUpdate").val();
        // if (!fnumber) {
        //     layer.msg("请选择员工工号");
        //     return;
        // }
        // if (!fname) {
        //     layer.msg("请选择员工名称");
        //     return;
        // }
        // if (!fgender) {
        //     layer.msg("请选择员工性别");
        //     return;
        // }
        // var fphone = $("#fphoneUpdate").val();
        // var fnote = $("#fnoteUpdate").val();
        // var fduty = $("#fdutyUpdate").val();
        // var skillList = [];
        // $("#fskillUpdate option:selected").each(function () {
        //     var relationId = $(this).val();
        //     var type = $(this).attr("data-type");
        //     var id = $(this).attr("data-id");
        //     var name = $(this).text();
        //     skillList.push({"relationId": relationId, "id": id, "type": type, "name": name});
        // })
        PostWebApi("updateUser", {
            id: selectUserId,
            staffSn: staffSn,
            staffName: staffName,
            sex: sex,
            telephone: telephone,
            job: job,
            skill: skill,
            department: department,
            remarks: remarks
        }).done(function (data) {
            if (data.code == 0) {
                layer.msg("修改成功");
                $("#myModalUpdate").modal('hide');
                $('#dataTable').bootstrapTable('refresh');
                selectUserId = 0;
            } else {
                layer.msg(data.msg);
            }
        })
    })

    function deleteData(delete_id) {
        // if (!selectUserId || selectUserId == 0) {
        //     layer.msg("请选择员工");
        //     return;
        // }
        swal({
            title: "您确定要删除该员工吗？",
            //text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "rgb(85 221 218)",
            confirmButtonText: "确定",
            closeOnConfirm: false
        }, function () {
            swal.close();
            PostWebApi("deleteUser", {
                id: delete_id
            }).done(function (data) {
                if (data.code == 0) {
                    layer.msg("删除成功");
                    $('#dataTable').bootstrapTable('refresh');
                    selectUserId = 0;
                } else {
                    layer.msg(data.msg);
                }
            })
        })
    }

    //----------------------------EXCEL-------------------------------------
    // 使用tableExport.js导出数据
    $("#export").click(function () {
        $('#dataTable').tableExport(
            {
                type: 'excel',//导出excel
                escape: 'false',
                ignoreColumn: [10],  //忽略某一列的索引
                fileName: '员工信息',  //文件名称设置
                worksheetName: '员工信息',  //表格工作区名称
                tableName: '员工信息',
                excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
            }
        )
    })

    //下载导入模版
    function downLoadTemp() {
        window.location.href = baseUrl + "downStaffExcelTemplate?fileName=员工导入模版";
    }

    //移除文件文字
    function removeImp() {
        var file = document.getElementById('import');
        file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
        //或者
        //file.outerHTML = file.outerHTML; //重新初始化了file的html
        $("#fileName").html('未上传文件');
    }

    //加载文件名
    function loadFile(file) {
        $("#fileName").html(file.name);
    }

    //导入excel文件信息
    function mySubmit() {
        var file = document.getElementById("import").files[0];
        var fileName = $("#fileName").val();
        var preffix = fileName.substring(fileName.lastIndexOf("\\") + 1, fileName.lastIndexOf("."));
        var suffix = fileName.substring(fileName.lastIndexOf("."));
        //创建新的表单数据对象
        var formData = new FormData();
        formData.append("file", file);
        formData.append("preffix", preffix);
        formData.append("suffix", suffix);
        $.ajax({
            url: baseUrl + "staffImport",
            type: "POST",
            contentType: false,
            datatype: "text",
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            success: function (data) {
                $('#dataTable').bootstrapTable('refresh');
                layer.msg(data.msg)
            }
        });
        removeImp();
        $('#myModal').modal('hide');
        return false;
    }
    
    
</script>


</body>

</html>
